---
title: Containers
---

## Defaults

Victory containers have default `width`, `height`, and `padding` props defined in the default [theme](/docs/guides/themes).

Victory renders components into responsive `svg` containers by default using `VictoryContainer`. `VictoryContainer` is a responsive container with a `viewBox` attribute set to `viewBox={"0 0 width, height"}` and styles `width: "100%" height: "auto"` in addition to any styles provided via props. Because Victory renders responsive containers, the `width` and `height` props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.

## Fixed Size Containers

Responsive containers are not appropriate for every application, so Victory provides a couple of options for rendering static containers. The easiest way to render a static container rather than a responsive one is by setting the `responsive` prop to false directly on the `containerComponent` instance.

```jsx live
<VictoryChart
  height={200}
  width={300}
  containerComponent={
    <VictoryContainer
      responsive={false}
    />
  }
  theme={VictoryTheme.clean}
>
  <VictoryLine
    y={(data) =>
      Math.sin(2 * Math.PI * data.x)
    }
  />
</VictoryChart>
```

## Render Order

Victory renders svg elements, so there is no concept of z-index. Instead the render order of components determines which elements will appear above others. Changing the order of rendered components can significantly alter the appearance of a chart. Compare the following charts.

:::note
The difference is the order of the children in `VictoryChart`.
:::

```jsx live noInline
const sampleFn = (data) =>
  Math.sin(2 * Math.PI * data.x);

const scatterStyle = {
  data: { fill: "red" },
};

function App() {
  return (
    <>
      <VictoryChart
        theme={VictoryTheme.clean}
      >
        <VictoryScatter
          y={sampleFn}
          samples={25}
          size={5}
          style={scatterStyle}
        />
        <VictoryLine y={sampleFn} />
      </VictoryChart>

      <VictoryChart
        theme={VictoryTheme.clean}
      >
        <VictoryLine y={sampleFn} />
        <VictoryScatter
          y={sampleFn}
          samples={25}
          size={5}
          style={scatterStyle}
        />
      </VictoryChart>
    </>
  );
}

render(<App />);
```

## Render on Top

Some components should _always_ render above others. Use `VictoryPortal` to render components in a top level container so that they appear above all other elements. `VictoryTooltip` uses `VictoryPortal`, by default, but any component may be wrapped in `VictoryPortal` to alter its rendering.

:::warning
`VictoryPortal` only works with components that are rendered within a [Victory Container](/docs/guides/containers) component.
:::

```jsx live
<VictoryChart
  domainPadding={40}
  theme={VictoryTheme.clean}
>
  <VictoryStack
    colorScale="warm"
    style={{
      data: { width: 30 },
      labels: { padding: -20 },
    }}
    labelComponent={
      <VictoryPortal>
        <VictoryLabel />
      </VictoryPortal>
    }
  >
    <VictoryBar
      data={[
        { x: 1, y: 3, label: "C" },
        { x: 2, y: 4, label: "C" },
        { x: 3, y: 2, label: "C" },
      ]}
    />
    <VictoryBar
      data={[
        { x: 1, y: 3, label: "B" },
        { x: 2, y: 4, label: "B" },
        { x: 3, y: 2, label: "B" },
      ]}
    />
    <VictoryBar
      data={[
        { x: 1, y: 3, label: "A" },
        { x: 2, y: 4, label: "A" },
        { x: 3, y: 2, label: "A" },
      ]}
    />
  </VictoryStack>
  <VictoryAxis />
</VictoryChart>
```

## Basic Container Types

Victory renders charts into top-level container components. The most commonly used container is `VictoryChart`.

Containers are responsible for rendering children into a responsive svg, and providing a portal component for rendering tooltips, or any other elements that should be rendered above everything else.

### VictoryContainer

`VictoryContainer` provides a top-level `<svg>` element for other Victory components to render within. Most containers extend `VictoryContainer` to add extra functionality.

See the [full API here](/docs/api/victory-container).

### VictoryChart

`VictoryChart` is a container that renders a set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes.

See the [full API here](/docs/api/victory-chart).

## Advanced Container Types

- [VictorySelectionContainer](#victoryselectioncontainer)
- [VictoryZoomContainer](#victoryzoomcontainer)
- [VictoryVoronoiContainer](#victoryvoronoicontainer)

### VictoryGroup

`VictoryGroup` is a container that renders a given set of children with shared props. This is useful for creating a group of components that share styles or data, or rendering multiple charts without axes.

See the [full API here](/docs/api/victory-group).

### VictoryBrushContainer

`VictoryBrushContainer` adds the ability to highlight a region of a chart, and interact with
highlighted regions, either by moving the region, expanding the region, or selecting a new region.

See the [Brush Selection](/docs/guides/data-selection) guide.

### VictoryCursorContainer

`VictoryCursorContainer` adds a cursor to a chart to inspect coordinates. The cursor can either be a 2-dimensional crosshair, or a 1-dimensional line. The cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart.

See the [Cursor Tooltips](/docs/guides/tooltips) guide.

### VictorySelectionContainer

`VictorySelectionContainer` is used to enable selecting data points within a highlighted region.
Clicking and dragging will select an x-y region, and add the `active` prop to any elements
corresponding to data points within the region. Create a select-box control by tying the set of
selected data points to other elements, such as a filtered table.

See the [Data Selection](/docs/guides/data-selection) guide.

### VictoryZoomContainer

`VictoryZoomContainer` provides pan and zoom behavior for any Victory component that works with an
x, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging.

See the [Pan and Zoom](/docs/guides/pan-and-zoom) guide.

### VictoryVoronoiContainer

`VictoryVoronoiContainer` adds the ability to associate a mouse position with the data point(s)
closest to it. When this container is added to a chart, changes in mouse position will add the `active`
prop to data and label components closest to the current mouse position.

See the [Tooltips](/docs/guides/tooltips) guide.

### Multiple Containers

Victory includes a `createContainer` helper that is used to create hybrid containers. `createContainer` can be used to create a new container with behaviors from two existing Victory containers.

It allows you to effectively
combine any two of the following containers: `VictoryBrushContainer`,
`VictoryCursorContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer`, or `VictoryZoomContainer`.

```js
const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");
```

#### Arguments

The function takes two `behavior` arguments as strings:

```js
createContainer(behaviorA, behaviorB)
```

#### Behavior

Each `behavior` must be one of the following strings:
`"brush"`, `"cursor"`, `"selection"`, `"voronoi"`, and `"zoom"`.
The resulting container uses the events from both behaviors.
For example, if both behaviors use the click event (like zoom and selection) the combined container
will trigger both behaviors' events on each click.

*Note*: Order of the behaviors matters in a few cases.
It is recommended to use `"zoom"` before any other behaviors: for example,
`createContainer("zoom", "voronoi")` instead of `createContainer("voronoi", "zoom")`.

#### Example

The following example creates a custom container that combines `VictoryVoronoiContainer` and
`VictoryZoomContainer`. Hovering over the chart will use Voronoi to highlight data points,
while scrolling and dragging will zoom and pan.

```jsx live noInline
const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");
const data = _.range(100).map((x) => ({x, y: 100 + x + _.random(10)}));

const App = () => (
  <VictoryChart
    containerComponent={
      <VictoryZoomVoronoiContainer
        labels={({ datum }) => `${datum.x}, ${datum.y}`}
      />
    }
    theme={VictoryTheme.clean}
  >
    <VictoryScatter data={data} />
  </VictoryChart>
);

render(<App/>);
```
